<template>

	<div>

		<el-row>
			<el-col :span="12">

				<el-input v-model="searchForm.menuName" />
			</el-col>
			<el-col :span="12">

				<el-button type="primary" @click="search()" size="mini">查询</el-button>
				<el-button type="primary" @click="toAdd()" size="mini">添加一级菜单</el-button>
			</el-col>
		</el-row>

	

		<!-- 向子组件传递数据 -->


		<el-table :data="tableData" v-loading="loading" row-key="menuId" border lazy
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :load="load" size="mini"
			style="width: 100%">
			<el-table-column prop="menuId" label="菜单ID" align="center" width="180"> </el-table-column>
			<el-table-column prop="menuName" label="菜单名称" align="center"> </el-table-column>
			<el-table-column prop="url" label="页面路径" align="center"> </el-table-column>
			<el-table-column prop="active" label="是否有效" align="center"> </el-table-column>
			<el-table-column prop="createtime" label="createtime" align="center"> </el-table-column>


			<el-table-column label="操作" align="center">
				<template slot-scope="scope">

					
				<el-button type="primary" @click="toAdd(scope.row.menuId)" size="mini">添加子菜单菜单</el-button>

				<el-button type="primary" size="mini" @click="toEdit(scope.row.menuId)">修改</el-button>

				</template>

			</el-table-column>

		</el-table>









		<el-dialog :visible.sync="visible" title="菜单编辑">

			<Edit v-if="visible" :visible.sync="visible" @close="close" :id="id" :parentId="parentId"></Edit>

		</el-dialog>

	</div>


</template>

<script>
	import Edit from './edit.vue'
	export default {
		name: 'Dept',
		components: {
			Edit
		},
		data() {
			return {
				searchForm: {
					pageNo: 1,
					size: 10,
					total: 0,
					menuName: ''
				},

				loading: false,
				id: '',
				parentId:null,
				visible: false,
				tableData: []
				// tableData:[{"deptno":10,"menuName":"ACCOUNTING11222","loc":"测试修改方法"},{"deptno":20,"menuName":"RESEARCH---uuuu","loc":"DALLAS"},{"deptno":30,"menuName":"SALES","loc":"CHICAGO"},{"deptno":40,"menuName":"OPERATIONS","loc":"BOSTON"},{"deptno":60,"menuName":"testmenuName中文","loc":"loc"},{"deptno":80,"menuName":"DEV开发","loc":"Harbin哈尔滨"}]
			}
		},
		methods: {
			search() {

				//重置 页号
				this.searchForm.pageNo = 1;

				this.list();

			},
			deleteById(id) {

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.$http({
						method: 'get',
						url: '/api/menu?_type=deleteById&menuId=' + id
					}).then((response) => {
						// let success  = response.data.success;
						let {
							success
						} = response.data;
						if (success) {
							this.$message.success("删除成功");
							this.list()
						}
					}).catch((e) => {
						console.log("失败的情况", e)
					});



				}).catch(() => {

				});

			},
			toAdd(parentId) {
				
				this.id = null;
				if(parentId){
					this.parentId = parentId
				}else{
					this.parentId  = null;
				}
				this.visible = true;
			},


			// 加载子元素
			load(treeNode, tree, resolve) {
				
			

				let url = '/api/menu?_type=getParent&parentId=' + treeNode.menuId; //查询子菜单
				// 获取远端图片
				this.$http({
					method: 'get',
					url: url
				}).then((response) => {
					this.loading = false;
					resolve(response.data);//渲染方法
				}).catch((e) => {
					this.loading = false;
					console.log("失败的情况", e)
				});
				
				
				

			},
			list() {

				this.loading = true;

				let url = '/api/menu?_type=getParent'; //查询顶层菜单
				// 获取远端图片
				this.$http({
					method: 'get',
					url: url
				}).then((response) => {
					this.loading = false;

					this.tableData = response.data;

				}).catch((e) => {
					this.loading = false;
					console.log("失败的情况", e)
				});
			},
			close() {
				this.list()
			},
			toEdit(id) {
				this.visible = true;
				this.id = id
			}
		},
		created() {

			this.list(); //查询默认

		}
	}
</script>

<style scoped>




</style>